<script lang="ts" setup>
import useTwoDialogStore from '/@/stores/twoDialog'
import pinia from '/@/stores/index';
const twoDialogStore = useTwoDialogStore(pinia)
const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    icon: {
        type: String,
        default: ''
    },
    name: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: [String, Number],
        default: '50%',
    },
    modelValue: {
        type: Boolean,
        default: false
    },
    headerClass: {
        type: String,
        default: ''
    },
    bodyClass: {
        type: String,
        default: ''
    },
    footerClass: {
        type: String,
        default: ''
    },
    appendToBody: {
        type: Boolean,
        default: true
    },
    showConfirm: {
        type: Boolean,
        default: true
    },
    showCancel: {
        type: Boolean,
        default: true
    }
})
// 组件唯一ID
const status = ref('minimize')
const fullscreen = ref(false)
const dialogId = ref(props.id)
const emit = defineEmits(['update:modelValue', 'close', 'minimize', 'submit'])
// 关闭对话框
const close = () => {
    status.value = 'close'
    twoDialogStore.remove(dialogId.value)
    emit('update:modelValue', false)
    emit('close')
}
// 最小化对话框
const minimize = () => {
    status.value = 'minimize'
    twoDialogStore.switchStatus(dialogId.value, false)
    emit('update:modelValue', false)
    emit('minimize')
}
const submit = () => {
    emit('submit')
}
watch(() => props.modelValue, (val) => {
    if (twoDialogStore.list.findIndex(f => f.id === dialogId.value) !== -1) {
        twoDialogStore.switchStatus(dialogId.value, val, {
            icon: props.icon,
            name: props.name || props.title,
        })
    } else {
        if (val) {
            twoDialogStore.add({
                id: dialogId.value,
                icon: props.icon,
                name: props.name || props.title,
                show: val
            })
        }
    }
})
defineExpose({
    close,
})
</script>
<template>
    <el-dialog
        :modelValue="twoDialogStore.list.find((f: { id: any; }) => f.id === dialogId) ? twoDialogStore.list.find((f: { id: any; }) => f.id === dialogId)?.show : modelValue"
        :width="width" :before-close="minimize" modal-class="modalClass" :show-close="false" :append-to-body="appendToBody"
        :transition="status === 'minimize' ? 'dialog-slide' : ''" :fullscreen="fullscreen" :header-class="headerClass" :body-class="bodyClass" :footer-class="footerClass">
        <template #header="{ titleClass }">
            <div class="header">
                <div class="title">
                    <slot name="header">
                        <h4 :class="titleClass">{{ title }}</h4>
                    </slot>
                </div>
                <div class="icons">
                    <i-ep-semi-select @click="minimize" />
                    <i-ep-full-screen @click="fullscreen = !fullscreen" />
                    <i-ep-close-bold @click="close" />
                </div>
            </div>
        </template>
        <slot></slot>
        <template #footer>
            <slot name="footer">
                <div class="dialog-footer">
                    <el-button v-if="showCancel" @click="close">取消</el-button>
                    <el-button v-if="showConfirm" type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </slot>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icons {
        color: var(--el-color-info);

        svg {
            cursor: pointer;

            &+svg {
                margin-left: 8px;
            }

            &:hover {
                color: var(--el-color-primary);
            }
        }
    }
}
</style>
<style lang="scss">
.modalClass {
    // background-color: rgba(0, 0, 0, 0)
}

.dialog-slide-enter-active,
.dialog-slide-leave-active,
.dialog-slide-enter-active .el-dialog,
.dialog-slide-leave-active .el-dialog {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dialog-slide-enter-from,
.dialog-slide-leave-to {
    opacity: 0;
}

.dialog-slide-enter-from .el-dialog,
.dialog-slide-leave-to .el-dialog {
    transform: translateY(150px);
    opacity: 0;
}
</style>